<template>
  <div>
    <BeautifulChat
      :participants="participants"
      :on-message-was-sent="onMessageWasSent"
      :message-list="messageList"
      :new-messages-count="newMessagesCount"
      :is-open="isChatOpen"
      :close="closeChat"
      :icons="icons"
      :open="openChat"
      :show-emoji="false"
      :show-file="false"
      :show-edition="true"
      :show-deletion="false"
      :deletion-confirmation="true"
      :show-typing-indicator="showTypingIndicator"
      :show-launcher="true"
      :show-close-button="false"
      :colors="colors"
      :always-scroll-to-bottom="alwaysScrollToBottom"
      :disable-user-list-toggle="false"
      :message-styling="messageStyling"
      @onType="handleOnType"
      @edit="editMessage"
    />
  </div>
</template>
<script>
import io from 'socket.io-client'
import { useUserStore } from '../../stores/user-store'
export default {
  name: 'App',
  data() {
    return {
      userStore: useUserStore(),
      participants: [
        {
          id: 'snf',
          name: '小史',
          imageUrl: 'https://api.multiavatar.com/snf.svg',
        },
      ], // the list of all the participant of the conversation. `name` is the user name, `id` is used to establish the author of a message, `imageUrl` is supposed to be the user avatar.
      // :title-image-url="titleImageUrl"
      // titleImageUrl: this.userStore.id,
      messageList: [{ type: 'text', author: `snf`, data: { text: `你好，我是智能客服小史，有什么能帮到你？` } }], // the list of the messages to show, can be paginated and adjusted dynamically
      newMessagesCount: 0,
      isChatOpen: false, // to determine whether the chat window should be open or closed
      showTypingIndicator: '', // when set to a value matching the participant.id it shows the typing indicator for the specific user
      colors: {
        header: {
          bg: '#4e8cff',
          text: '#ffffff',
        },
        launcher: {
          bg: '#4e8cff',
        },
        messageList: {
          bg: '#ffffff',
        },
        sentMessage: {
          bg: '#4e8cff',
          text: '#ffffff',
        },
        receivedMessage: {
          bg: '#eaeaea',
          text: '#222222',
        },
        userInput: {
          bg: '#f4f7f9',
          text: '#565867',
        },
      },
      alwaysScrollToBottom: false,
      messageStyling: true,
    }
  },
  created() {
    this.connectToServer()
  },
  methods: {
    connectToServer() {
      // 连接到服务器
      this.socket = io('http://localhost:5000')
      console.log('链接')

      // 监听来自服务器的chat_output事件
      this.socket.on('chat_output', (message) => {
        console.log('Received message from server:', message.output)
        // 处理服务器的回答，例如将其添加到messageList中
        this.messageList.push({ type: 'text', author: `snf`, data: { text: message.output } })
      })
    },
    // sendMessage(text) {
    //   //   if (text.length > 0) {
    //   //     this.newMessagesCount = this.isChatOpen ? this.newMessagesCount : this.newMessagesCount + 1
    //   //     this.onMessageWasSent({ author: 'support', type: 'text', data: { text } })
    //   //   }

    //   // 发送消息给服务器
    //   console.log('send')
    //   if (text.length > 0) {
    //     // 假设你想发送的是用户的最新一条消息
    //     this.socket.emit('chat', text) // 使用'chat'事件发送消息
    //     console.log('发送')
    //     // 更新UI等...
    //     this.newMessagesCount = this.isChatOpen ? this.newMessagesCount : this.newMessagesCount + 1
    //     this.onMessageWasSent({ author: 'me', type: 'text', data: { text } })
    //   }
    // },
    onMessageWasSent(message) {
      console.log('hhh')
      //   console.log(message.data.text)
      this.socket.emit('chat', message.data.text) // 使用'chat'事件发送消息
      // called when the user sends a message
      this.messageList = [...this.messageList, message]
    },
    openChat() {
      // called when the user clicks on the fab button to open the chat
      this.isChatOpen = true
      this.newMessagesCount = 0
    },
    closeChat() {
      // called when the user clicks on the botton to close the chat
      this.isChatOpen = false
    },
    handleScrollToTop() {
      // called when the user scrolls message list to top
      // leverage pagination for loading another page of messages
    },
    handleOnType() {
      console.log('Emit typing event')
    },
    editMessage(message) {
      const m = this.messageList.find((m) => m.id === message.id)
      m.isEdited = true
      m.data.text = message.data.text
    },
  },
}
</script>
